<template>
	<div class="flex gap-2">
		<el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
			{{ tag }}
		</el-tag>
		<el-input
			v-if="inputVisible"
			ref="InputRef"
			v-model="inputValue"
			class="w-20"
			size="small"
			@keyup.enter="handleInputConfirm"
			@blur="handleInputConfirm"
		/>
		<el-button v-else class="button-new-tag" size="small" @click="showInput"> + New Tag </el-button>
	</div>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { ElInput } from "element-plus";

const inputValue = ref("");
const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
const inputVisible = ref(false);
const InputRef = ref(null);

const handleClose = (tag) => {
	dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const showInput = () => {
	inputVisible.value = true;
	nextTick(() => {
		InputRef.value?.input?.focus();
	});
};

const handleInputConfirm = () => {
	if (inputValue.value) {
		dynamicTags.value.push(inputValue.value);
	}
	inputVisible.value = false;
	inputValue.value = "";
};
</script>
